<template>
  <div class="">
  	<div class="referralPage">
  		<div class="referral-top">
        <img src="/static/wechat/images/referralTop.png">
      </div>

      <div class="referral">
        <div class="referralInfo box-shadw">
          <input placeholder="推荐好友姓名" type="text" v-model="name" name="name">
          <input placeholder="推荐好友手机号" type="text" v-model="phone" name="phone">
          <addressInfo :domicile ="domicile" class="info"></addressInfo>
          <!--<input placeholder="推荐好友所在地" type="" v-model="address" name="address">-->
          <button @click="referralButton()">立即推荐</button>
        </div>
      </div>
      <div class="referral">
        <div class="referralTitle">
          推荐奖金规则
        </div>
        <div class="rules">
          <p>{{rule}}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import address from './address'
  import { eventBus } from '@/common/eventBus'
  import {zgzCompanyUserRc,zgzRcInfo} from'@/controller'
  export default {
    name: 'referral',
    components: {
      addressInfo:address
    },
    data () {
      return {
        msg: 'referral',
        name:'',
        phone:'',
        domicile:'',
        referralList:[],
        title:'',
        rule:'',
        isDoMove:false
      }
    },
    methods:{
      doMove(){
        this.isDoMove = true;
        setTimeout(()=>{
          this.referralList.push(this.referralList[0]);
          this.referralList.shift();
          this.isDoMove = false;
        },500)
      },
      referralButton(){
        let regName =/^[\u4e00-\u9fa5]{2,4}$/;
        if(this.name==''||this.name==undefined){
          this.$toast.center("请输入推荐好友姓名")
        }if(!regName.test(this.name)){
          this.$toast.center("请输入推荐好友真实姓名")
        }else if(this.phone==''||this.phone==undefined){
          this.$toast.center("请输入推荐好友电话")
        }else if(this.domicile==''||this.domicile==undefined){
          this.$toast.center("请输入推荐好友所在地")
        }else{
          let params = {
              recmdedName:this.name,
              recmdedDomicile:this.domicile,
              recmdedPhone:this.phone,
          }
          zgzCompanyUserRc(params).then((data)=>{
              if(data.code==0){
                this.$router.push({
                  path:`/referralSuccess`
                })
              }else if(data.code==1){
                this.$toast.center(data.message);
              }
          })
        }
      }
    },
    mounted(){
      eventBus.$on('getAddress', (val) => {
        this.domicile = val;
      });
      zgzRcInfo().then((data)=>{
        if(data.code==0){
          let referralList = [];
          data.data.list.forEach((item)=>{
            referralList.push({
              phoneEnd:item.phone.substr(item.phone.length-4),
              money:item.money
            })
          });
          this.referralList = referralList;
          this.rule  = data.data.rule;
          this.title = data.data.title;
          setInterval(()=>{
            this.doMove()
          },1000)

        }
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
